<script setup>

import MyNav from "../../../../components/MyNav.vue";
import MyForm from "../../../../components/MyForm.vue";
import {insertApi, listApi} from "../../../../api/axios.js";
import {onMounted, reactive, ref} from "vue";
import {GENDER_OPTIONS, RULE} from "../../../../const/index.js";
import {ElMessage} from "element-plus";
import router from "../../../../router/index.js";
import {getResponseData} from "../../../../request/index.js";

const pid = sessionStorage.getItem('pid');
const menuTitle = sessionStorage.getItem('menuTitle');

// 路径导航
const navItems = [
  {icon: 'Avatar', label: '用户管理'},
  {icon: 'Menu', label: '菜单列表（父菜单）', url: '/Menu'},
  {icon: 'Menu', label: '下级菜单（子菜单）', url: '/SubMenu'},
  {icon: 'Plus', label: '添加新子菜单'},
]

//  表单项 + 表单值 + 表单规则
let items = ref([
  {label: '父菜单名称', prop: 'menuTitle', disabled: true},
  {label: '菜单名称', prop: 'title', required: true, span: 12},
  {label: '路由地址', prop: 'url', required: true, span: 12},
  {label: '菜单图标', prop: 'icon', type: 'icon', required: true},
  {label: '菜单描述', prop: 'info', type: 'textarea'},
])
let params = reactive({});
let rules = {title: RULE.TITLE, info: RULE.INFO};

/* ================= 添加成功后 ================= */
function insertSuccess() {
  ElMessage.success("添加菜单成功！");
  setTimeout(() => router.push('/SubMenu'), 1000);
}


onMounted(() => {
  params.pid = pid;
  params.menuTitle = menuTitle;
});

</script>

<template>
  <my-nav :items="navItems"/>
  <el-card class="sub-menu-insert-card" header="添加新菜单">
    <my-form type="insert"
             :items="items"
             :params="params"
             :rules="rules"
             :api="insertApi"
             :args="{module: 'menu'}"
             :callback="insertSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.sub-menu-insert-card {
  width: 60%; // 宽度
  margin: 65px auto 0; // 居中
}
</style>